<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="zhuce.php" method="get">
        <p>fieldset legend的使用</p>
        <fieldset>
            <legend>用户注册页面必填信息</legend>
        <table>
            <tr>
                <td>用户名:</td>
                <td><input type="text" name="user" placeholder="请输入用户名" autofocus required></td>
            </tr>
            <tr>
                <td>密码:</td>
                <td><input type="password" name="pwd" maxlength="10" placeholder="请最多输入10位密码" required></td>
            </tr>
            <tr>
                <td>确认密码:</td>
                <td><input type="password" name="pwd2" placeholder="请确认密码" required></td>
            </tr>
            <tr>
                <td>email地址:</td>
                <td><input type="email" name="email" placeholder="请输入email" required multiple></td>
            </tr>
            <tr>
                <td>手机号码:</td>
                <td><input type="tel" name="tel" placeholder="请最多输入11位手机号码" required autocomplete="off" pattern="[0-9]{11}" title="11位手机号码"></td>
            </tr>
        </table>
        </fieldset>
        <fieldset>
            <legend>用户注册页面选填信息</legend>
            <table>
                <tr>
                    <td>个人主页:</td>
                    <td><input type="url" name="url" placeholder="请输入个人主页"></td>
                </tr>
                <tr>
                    <td>喜欢的颜色:</td>
                    <td><input type="color" placeholder="请输入喜欢的颜色"></td>
                </tr>
                <tr>
                    <td>从事行业:</td>
                    <td><input list="profession" name="profession"></td>
                    <datelist id="profession">
                        <option value="企业">
                        <option value="事业">
                        <option value="公务员">
                        <option value="教育">
                    </datelist>
                </tr>
                <tr>
                    <td>居住城市:</td>
                    <td>
                        <select name="edu" size="2">
                            <option selected="selected">北京</option>
                            <option>天津</option>
                            <option>上海</option>
                            <option>深圳</option>
                            <option>其他</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>年龄:</td>
                    <td><input type="number" name="age" min="0" max="100" placeholder="请输入年龄"></td>
                </tr>
                <tr>
                    <td>出生日期:</td>
                    <td><input type="date" name="birthday"></td>
                </tr>
                <tr>
                    
                    <td colspan="2" align="center"><input type="submit" value="注册"><input type="reset" value="重置"></td>
                </tr>
            </table>
        </fieldset>
    </form>
    <input length="">
</body>
</html>